<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5标签教程 - 完整指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 2rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 20px;
        }
        
        .intro {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .intro h2 {
            color: #667eea;
            margin-bottom: 1rem;
        }
        
        .tag-category {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .tag-category h2 {
            color: #764ba2;
            border-bottom: 2px solid #667eea;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }
        
        .tag-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .tag-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 1.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .tag-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .tag-card h3 {
            color: #667eea;
            margin-bottom: 0.5rem;
        }
        
        .tag-card code {
            background: #f8f9fa;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
        }
        
        .example {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 4px 4px 0;
        }
        
        .example-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #764ba2;
        }
        
        footer {
            text-align: center;
            padding: 2rem;
            background: #333;
            color: white;
            margin-top: 2rem;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
            }
            
            .tag-grid {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5标签教程</h1>
        <p class="subtitle">完整指南：掌握所有HTML5标签的使用方法</p>
    </header>
    
    <div class="container">
        <section class="intro">
            <h2>HTML5简介</h2>
            <p>HTML5是HTML标准的最新演进版本，它引入了许多新元素和API，使Web开发更加强大和灵活。本教程将详细介绍HTML5中的各种标签及其用法。</p>
        </section>
        
        <!-- 文档结构标签 -->
        <section class="tag-category">
            <h2>文档结构标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;!DOCTYPE html&gt;</h3>
                    <p>声明文档类型为HTML5</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;!DOCTYPE html&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;html&gt;</h3>
                    <p>HTML文档的根元素</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;html lang="zh-CN"&gt;...&lt;/html&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;head&gt;</h3>
                    <p>文档头部，包含元数据</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;head&gt;&lt;title&gt;标题&lt;/title&gt;&lt;/head&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;title&gt;</h3>
                    <p>定义文档标题</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;title&gt;我的网页&lt;/title&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;meta&gt;</h3>
                    <p>定义文档元数据</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;meta charset="UTF-8"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;body&gt;</h3>
                    <p>文档主体内容</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;body&gt;&lt;p&gt;内容&lt;/p&gt;&lt;/body&gt;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 内容分区标签 -->
        <section class="tag-category">
            <h2>内容分区标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;header&gt;</h3>
                    <p>定义页面或章节的页眉</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;header&gt;&lt;h1&gt;网站标题&lt;/h1&gt;&lt;/header&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;nav&gt;</h3>
                    <p>定义导航链接</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/nav&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;main&gt;</h3>
                    <p>定义文档的主要内容</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;main&gt;&lt;p&gt;主要内容&lt;/p&gt;&lt;/main&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;article&gt;</h3>
                    <p>定义独立的内容</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;article&gt;&lt;h2&gt;文章标题&lt;/h2&gt;&lt;p&gt;文章内容&lt;/p&gt;&lt;/article&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;section&gt;</h3>
                    <p>定义文档中的节</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;section&gt;&lt;h2&gt;章节标题&lt;/h2&gt;&lt;p&gt;章节内容&lt;/p&gt;&lt;/section&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;aside&gt;</h3>
                    <p>定义与页面内容相关的侧边栏</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;aside&gt;&lt;h3&gt;相关链接&lt;/h3&gt;&lt;/aside&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;footer&gt;</h3>
                    <p>定义页面或章节的页脚</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;footer&gt;&lt;p&gt;版权信息&lt;/p&gt;&lt;/footer&gt;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 文本内容标签 -->
        <section class="tag-category">
            <h2>文本内容标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;h1&gt; - &lt;h6&gt;</h3>
                    <p>定义标题级别</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;h1&gt;主标题&lt;/h1&gt;&lt;h2&gt;副标题&lt;/h2&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;p&gt;</h3>
                    <p>定义段落</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;p&gt;这是一个段落。&lt;/p&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;br&gt;</h3>
                    <p>定义换行</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;p&gt;第一行&lt;br&gt;第二行&lt;/p&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;hr&gt;</h3>
                    <p>定义主题分隔线</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;p&gt;内容1&lt;/p&gt;&lt;hr&gt;&lt;p&gt;内容2&lt;/p&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;pre&gt;</h3>
                    <p>定义预格式化文本</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;pre&gt;预格式化文本&lt;/pre&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;blockquote&gt;</h3>
                    <p>定义块引用</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;blockquote&gt;引用内容&lt;/blockquote&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;ol&gt;</h3>
                    <p>定义有序列表</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;ol&gt;&lt;li&gt;项目1&lt;/li&gt;&lt;li&gt;项目2&lt;/li&gt;&lt;/ol&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;ul&gt;</h3>
                    <p>定义无序列表</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;ul&gt;&lt;li&gt;项目1&lt;/li&gt;&lt;li&gt;项目2&lt;/li&gt;&lt;/ul&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;li&gt;</h3>
                    <p>定义列表项</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;li&gt;列表项&lt;/li&gt;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 行内文本语义标签 -->
        <section class="tag-category">
            <h2>行内文本语义标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;a&gt;</h3>
                    <p>定义超链接</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;a href="https://example.com"&gt;链接&lt;/a&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;strong&gt;</h3>
                    <p>定义重要内容</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;strong&gt;重要内容&lt;/strong&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;em&gt;</h3>
                    <p>定义强调内容</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;em&gt;强调内容&lt;/em&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;small&gt;</h3>
                    <p>定义小号文本</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;small&gt;小号文本&lt;/small&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;mark&gt;</h3>
                    <p>定义高亮文本</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;mark&gt;高亮文本&lt;/mark&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;del&gt;</h3>
                    <p>定义删除文本</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;del&gt;删除文本&lt;/del&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;ins&gt;</h3>
                    <p>定义插入文本</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;ins&gt;插入文本&lt;/ins&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;sub&gt;</h3>
                    <p>定义下标文本</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>H&lt;sub&gt;2&lt;/sub&gt;O</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;sup&gt;</h3>
                    <p>定义上标文本</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>E = mc&lt;sup&gt;2&lt;/sup&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;code&gt;</h3>
                    <p>定义代码片段</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;code&gt;console.log('Hello');&lt;/code&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;kbd&gt;</h3>
                    <p>定义键盘输入</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>按 &lt;kbd&gt;Ctrl+C&lt;/kbd&gt; 复制</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;samp&gt;</h3>
                    <p>定义程序输出</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;samp&gt;程序输出结果&lt;/samp&gt;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 嵌入内容标签 -->
        <section class="tag-category">
            <h2>嵌入内容标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;img&gt;</h3>
                    <p>定义图像</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;img src="image.jpg" alt="描述"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;iframe&gt;</h3>
                    <p>定义内联框架</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;iframe src="https://example.com"&gt;&lt;/iframe&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;embed&gt;</h3>
                    <p>定义嵌入内容</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;embed src="video.swf"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;object&gt;</h3>
                    <p>定义外部资源</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;object data="flash.swf"&gt;&lt;/object&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;param&gt;</h3>
                    <p>定义对象参数</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;param name="autoplay" value="true"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;video&gt;</h3>
                    <p>定义视频</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;video src="movie.mp4" controls&gt;&lt;/video&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;audio&gt;</h3>
                    <p>定义音频</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;audio src="music.mp3" controls&gt;&lt;/audio&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;source&gt;</h3>
                    <p>定义媒体源</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;source src="movie.mp4" type="video/mp4"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;track&gt;</h3>
                    <p>定义文本轨道</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;track src="subtitles.vtt" kind="subtitles"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;canvas&gt;</h3>
                    <p>定义画布</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;svg&gt;</h3>
                    <p>定义矢量图形</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;svg width="100" height="100"&gt;&lt;circle cx="50" cy="50" r="40"&gt;&lt;/svg&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;math&gt;</h3>
                    <p>定义数学标记</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;math&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;/math&gt;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 表格标签 -->
        <section class="tag-category">
            <h2>表格标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;table&gt;</h3>
                    <p>定义表格</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;table&gt;...&lt;/table&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;caption&gt;</h3>
                    <p>定义表格标题</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;caption&gt;表格标题&lt;/caption&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;thead&gt;</h3>
                    <p>定义表格头部</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;thead&gt;&lt;tr&gt;&lt;th&gt;标题&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;tbody&gt;</h3>
                    <p>定义表格主体</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;数据&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;tfoot&gt;</h3>
                    <p>定义表格底部</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;tfoot&gt;&lt;tr&gt;&lt;td&gt;总计&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;tr&gt;</h3>
                    <p>定义表格行</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;tr&gt;&lt;td&gt;单元格&lt;/td&gt;&lt;/tr&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;th&gt;</h3>
                    <p>定义表格标题单元格</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;th&gt;标题&lt;/th&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;td&gt;</h3>
                    <p>定义表格数据单元格</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;td&gt;数据&lt;/td&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;col&gt;</h3>
                    <p>定义表格列属性</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;col span="2" style="background-color:yellow"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;colgroup&gt;</h3>
                    <p>定义表格列组合</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;colgroup&gt;&lt;col&gt;&lt;/colgroup&gt;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 表单标签 -->
        <section class="tag-category">
            <h2>表单标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;form&gt;</h3>
                    <p>定义表单</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;form action="/submit" method="post"&gt;...&lt;/form&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;input&gt;</h3>
                    <p>定义输入控件</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;input type="text" name="username"&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;textarea&gt;</h3>
                    <p>定义多行文本输入</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;textarea name="message"&gt;&lt;/textarea&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;button&gt;</h3>
                    <p>定义按钮</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;button type="submit"&gt;提交&lt;/button&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;select&gt;</h3>
                    <p>定义下拉列表</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;select name="country"&gt;&lt;option&gt;中国&lt;/option&gt;&lt;/select&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;option&gt;</h3>
                    <p>定义下拉选项</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;option value="1"&gt;选项1&lt;/option&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;optgroup&gt;</h3>
                    <p>定义选项组</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;optgroup label="组名"&gt;&lt;option&gt;选项&lt;/option&gt;&lt;/optgroup&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;label&gt;</h3>
                    <p>定义表单控件标签</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;label for="name"&gt;姓名：&lt;/label&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;fieldset&gt;</h3>
                    <p>定义表单字段组</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;fieldset&gt;&lt;legend&gt;信息&lt;/legend&gt;&lt;/fieldset&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;legend&gt;</h3>
                    <p>定义字段组标题</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;legend&gt;用户信息&lt;/legend&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;datalist&gt;</h3>
                    <p>定义输入框的预定义选项</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;datalist id="browsers"&gt;&lt;option&gt;Chrome&lt;/option&gt;&lt;/datalist&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;output&gt;</h3>
                    <p>定义计算结果</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;output name="result"&gt;结果&lt;/output&gt;</code>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 交互元素标签 -->
        <section class="tag-category">
            <h2>交互元素标签</h2>
            <div class="tag-grid">
                <div class="tag-card">
                    <h3>&lt;details&gt;</h3>
                    <p>定义详细信息</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;details&gt;&lt;summary&gt;详情&lt;/summary&gt;&lt;p&gt;详细内容&lt;/p&gt;&lt;/details&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;summary&gt;</h3>
                    <p>定义details元素的标题</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;summary&gt;点击展开&lt;/summary&gt;</code>
                    </div>
                </div>
                
                <div class="tag-card">
                    <h3>&lt;dialog&gt;</h3>
                    <p>定义对话框</p>
                    <div class="example">
                        <div class="example-title">示例：</div>
                        <code>&lt;dialog open&gt;对话框内容&lt;/dialog&gt;</code>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <footer>
        <p>&copy; 2023 HTML5标签教程 - 完整指南</p>
    </footer>
</body>
</html>
